<template>
  <a-button
    :class="{'c-button':true,'c-button-primary':type==='primary','c-button-default':type==='default','c-button-disabled':cdisabled,'c-button-aligin':align==='right','c-button-none':!align,...cclass}"
    :type="type"
    :icon="icon"
    :disabled="cdisabled"
    :loading="cloading"
    @click="click">
    <slot></slot>
  </a-button>
</template>

<script>
export default {
  name: 'AntButton',
  props: {
    /**
     * 按钮类型
     */
    type: {
      type: String,
      default: 'primary'
    },
    /**
     * 按钮图标
     */
    icon: {
      type: String,
      default: ''
    },
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否在加载中
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 是否自定义按钮恢复函数
     */
    callBack: {
      type: Boolean,
      default: false
    },
    /**
     * 自定义样式
     */
    cclass: {
      type: Object,
      default: () => {}
    },
    /**
     * 对齐方式 - 左、右
     */
    align: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      cloading: this.loading,
      cdisabled: this.disabled
    }
  },
  created() {},
  mounted() {
    this.cloading = false
  },
  beforeDestroy() {},
  methods: {
    click() {
      this.setDisableDelay()
      this.$emit('click', this)
    },
    /**
     * 禁用
     */
    setDisableDelay() {
      this.cloading = true
      this.cdisabled = true
      const that = this
      if (this.callBack === false) {
        setTimeout(function() {
          that.setButtonEnable()
        }, 1000)
      }
    },
    /**
     * 设置按钮可点击
     */
    setButtonEnable() {
      this.cloading = false
      this.cdisabled = false
    }
  },
  watch: {
    disabled() {
      this.cdisabled = this.disabled
    }
  }
}
</script>

<style lang="less" scoped>
.c-button{
  border-radius: 4px;
  font-family:'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,PingFang SC,Noto Sans,Noto Sans CJK SC,Microsoft YaHei,微软雅黑,sans-serif';
  font-weight: 500;
  margin:0px 16px 0px 0px;
}
.c-button-primary{
  background: @primary-color;
  color: #FFFFFF;
}
.c-button-default{
  background: #FFFFFF;
  border: 1px solid #E5E6EB;
}
.c-button-active{
  color:@primary-color;
}
.c-button-disabled{
  background:#f5f5f5 !important;
  color: #1D2129 !important;
}
.c-button-aligin{
  margin:0px 0px 0px 16px;
}
.c-button-none{
  margin:0px;
}
</style>
